<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>意见反馈</title>
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <style>
        * {
            background: #e9e9e9;
        }

        .opinion {
            position: absolute;
            right: 40px;
            top: 39px;
            background: #ea5718;
            border: 1px solid #ea5718;
            outline: medium;
            color: #fff;
        }

        .feb-fff {
            height: 14px;
            background: #fff;
        }

        .feb-content {
            height: 38px;
            padding-left: 26px;
            line-height: 38px;
            font-size: 16px;
            letter-spacing: 2.4px;
            border-bottom: 1px solid #9e9e9e;
        }

        .textarea {
            background: #fff;
            padding-left: 26px;
        }

        textarea {
            width: 99%;
            line-height: 15px;
            font-size: 13px;
            background: #fff;
            border-color: #fff;
            margin-top: 10px;
            height: 119px;
            color: rgba(177, 177, 177, 1);
            outline: medium;
        }

        .feb-num {
            height: 35px;
            padding-left: 67px;
            background: #fff;
            position: relative;
            letter-spacing: 2.4px;
        }

        .downward {
            background: #fff !important;
        }

        .d {
            position: absolute;
            right: 59px;
            width: 15px;
            height: 15px;
            top: 9px;
            background-color: rgba(0, 0, 0, 0)
        }

        input {
            background: #fff;
            margin-left: 10px;
            border-color: #fff;
        }

        .feb-image {
            background: #fff;
            position: relative;
            padding: 19px 6%;
        }

        .forty-five {
          width: 120px;
            height: 81px;
            background: #fff;
            float: left;
            margin-left: 2.5%;
        }

        .mvplay {
            height: 81px;
            width: 46%;
            float: right;
        }

        .dele {
            position: absolute;
            right: -5px;
            top: -3px;
            width: 11px;
            height: 11px;
            background-color: rgba(0, 0, 0, 0)
        }

        .clear {
            clear: both;
        }

        .tupianlists {
            width: 120px;
            /*margin: 0% 2.5%;*/
            margin: 0 15px;
            height: 81px;
            margin-bottom:10px;
            float: left;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="vm">

        <div class="big-box">

            <div class="feb-fff">
            </div>
            <div class="feb-content">
                反馈内容
            </div>
            <div class="textarea">
                <textarea placeholder="请详细描述问题並截图，便于我们更好为您解决问题" v-model="content" @input="descInput">
              </textarea>
            </div>
            <div class="feb-content">
                联系方式
            </div>
            <div class="feb-num">
                <span style="background-color:#fff;" onclick="Openphone()">+{{guojianumber}}</span> <img src="../../image/login/downward.png" alt="" class="downward">
                <input type="text" name="" value="" placeholder="请输入手机号" v-model="mobile" @input="mobileInput">
                <img src="../../image/login/delete.png" v-if="ismobileflag" alt="" class="d" v-on:click="clearinput()">
            </div>
            <div class="feb-content">
                反馈图片
            </div>
            <div class="feb-image">
                <div class="tupianlists"  v-for='list,index in tupianlists'>
                    <img v-bind:src=list.src  alt="" style="width: 100%;height:100%;border-radius:5px;">
                    <img src="../../image/login/delete.png" alt="" class="dele" v-on:click="closeImg(index)">
                </div>
                <img src="../../image/login/45.png" class="forty-five" v-on:click="addImage()" v-if="flag">
                <div class="clear"></div>

            </div>

        </div>
    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/login.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
    var uid = $api.getStorage('uid');
    var session = $api.getStorage('session');
    var vm = new Vue({
        el: '#vm',
        data: {
            content: '',
            mobile: '',
            guojianumber: '86',
            ismobileflag: true,
            delettu: '',
            tupianlists: [],
            flag: true,
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.addEventListener({
                    name: 'submitfeedback'
                }, function(ret, err) {
                    _this.submit();
                });

                api.parseTapmode();
                api.addEventListener({
                    name: 'number'
                }, function(ret, err) {
                    if (ret) {
                        _this.guojianumber = ret.value.number
                    }
                });

                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
            }
        },
        methods: {
            init: function() {
                var _this = this;
                _this.mobile = $api.getStorage('mobile1');
            },
            clearinput: function() {
                var _this = this;
                _this.mobile = '';
                _this.ismobileflag = false;
            },
            descInput() {
                var _this = this;
                var txtVal = _this.content.length;
                if (txtVal >= 199) {
                    _this.content = _this.content.substr(0, 199);
                    api.toast({
                        msg: '最多输入200个字',
                        duration: 2000,
                        location: 'middle'
                    });
                }
            },
            mobileInput() {
                var _this = this;
                if (_this.mobile.length != 0) {
                    _this.ismobileflag = true;
                } else {
                    _this.ismobileflag = false;
                }
            },
            addImage: function() {
                var _this = this;
                api.getPicture({
                    sourceType: 'album',
                    encodingType: 'jpg',
                    mediaValue: 'pic',
                    destinationType: 'url',
                    allowEdit: true,
                    quality: 100,
                    targetWidth: 500,
                    targetHeight: 500,
                    saveToPhotoAlbum: false
                }, function(ret, err) {
                    if (ret) {
                        if (ret.data) {
                            _this.fnUploadAtavar(ret.data)
                        } else {
                            api.toast({
                                msg: '您没有选择图片或者没有打开相机权限',
                                duration: 2000,
                                location: 'middle'
                            });
                        }
                    } else {
                        var systemType = api.systemType;
                        if (systemType == 'ios') {
                            api.toast({
                                msg: '您没有选择图片或者没有打开相机权限',
                                duration: 2000,
                                location: 'middle'
                            });
                        }
                    }
                });
            },
            closeImg: function(index) {
                var _this = this;
                _this.delettu = _this.tupianlists[index].src;
                new rest().get('deleteImg').datae({
                    img: _this.delettu
                }).success(function(res) {
                    if (res.flag == 1) {
                        _this.tupianlists.splice(index, 1)
                    } else {
                        api.toast({
                            msg: res.msg,
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                    console.log(JSON.stringify(res))
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()

            },
            fnUploadAtavar: function(avatarUrl_) {
                var _this = this;
                api.ajax({
                    url: config.apiHost + config.restRoute.uploadImg,
                    method: 'post',
                    data: {
                        values: {

                        },
                        files: {
                            file: avatarUrl_
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        if (ret.flag == 1) {
                            _this.tupianlists.push({
                                src: ret.msg
                            })
                        } else {
                            api.toast({
                                msg: ret.msg,
                                duration: 2000,
                                location: 'bottom'
                            });
                        }
                        console.log(JSON.stringify(ret));
                        console.log('================');
                    } else {
                        console.log(JSON.stringify(err));
                    }
                });
            },

            submit() {
                var _this = this;
                var img0, img1, img2, img3, img4;
                if (_this.tupianlists.length == 1) {
                    img0 = _this.tupianlists[0].src;
                } else if (_this.tupianlists.length == 2) {
                    img0 = _this.tupianlists[0].src;
                    img1 = _this.tupianlists[1].src;
                } else if (_this.tupianlists.length == 3) {
                    img0 = _this.tupianlists[0].src;
                    img1 = _this.tupianlists[1].src;
                    img2 = _this.tupianlists[2].src;
                } else if (_this.tupianlists.length == 4) {
                    img0 = _this.tupianlists[0].src;
                    img1 = _this.tupianlists[1].src;
                    img2 = _this.tupianlists[2].src;
                    img3 = _this.tupianlists[3].src;
                } else if (_this.tupianlists.length == 5){
                    img0 = _this.tupianlists[0].src;
                    img1 = _this.tupianlists[1].src;
                    img2 = _this.tupianlists[2].src;
                    img3 = _this.tupianlists[3].src;
                    img4 = _this.tupianlists[4].src;
                }
                if (!_this.content) {
                    api.toast({
                        msg: '请填写反馈内容',
                        duration: 2000,
                        location: 'middle'
                    });
                } else if (M.phone(_this.mobile)) {
                    new rest().post('feedBack').datae({
                        '_uid': uid,
                        'content': _this.content,
                        'session': session,
                        'img1': img0,
                        'img2': img1,
                        'img3': img2,
                        'img4': img3,
                        'img5': img4,
                        // 'mobile': '+' + _this.guojianumber + _this.mobile
                        'mobile': _this.guojianumber+_this.mobile
                    }).success(function(res) {
                        if (res.flag == 1) {
                            api.sendEvent({
                                name: 'istijiao',
                            });
                            api.toast({
                                msg: '已提交',
                                duration: 2000,
                                location: 'middle'
                            });
                            api.closeWin();
                        } else {
                            api.toast({
                                msg: res.msg,
                                duration: 2000,
                                location: 'middle'
                            });
                        }
                    }).error(function(err) {
                        console.log(JSON.stringify(err))
                    }).run()
                }

            },
        },
        watch: {
            tupianlists: function(newtupianlists) {
                if (newtupianlists.length >= 5) {
                    this.flag = false
                } else {
                    this.flag = true
                }
            }
        },
    })

    function Openphone() {
        api.openWin({
            name: 'arearegion',
            url: 'area-region-win.html',

        });
    }
</script>

</html>
